<template>
  <view class="content">
    <view class="page-container">
      <block v-if="goods.length > 0" v-for="(item, index) in goods" :key="index">
        <view class="comment-card">
          <view class="textarea-container">
            <u-textarea class="textarea" :maxlength="50" indicator placeholder="展开说说对商品的想法吧！" v-model="item.textAreaValue" />
          </view>
          <view class="goods-info-container">
            <view class="goods-image-container">
              <image class="goods-image" :src="item.thumbnail" />
            </view>
            <view class="goods-title-container">
              <view class="goods-title">{{ item.name }}</view>
              <view class="goods-price">
                <view>￥<text>{{ item.realityPrice }}</text></view>
                <view class="number">×{{ item.number }}</view>
              </view>
            </view>
          </view>
          <view class="rate-container">
            <text class="rate-title">商品评价</text>
            <view class="rate">
              <u-rate :value="item.goodRateValue" v-model="value" activeColor="#32B499"></u-rate>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="submit-btn">
      <view @click="onSubmit">发布</view>
    </view>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';
export default {
  data() {
    return {
      userId: getUserInfo().ypdUser?.userId,
      goodsDetail: {},
      texts: ['差评', '差评', '中评', '中评', '好评'],
      goods: [],
      orderId: '',
      textAreaValue: '',
      value: ''
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
  },
  onShow() {
    this.getOrderDetail();
  },
  methods: {
    //获取订单详情
    async getOrderDetail() {
      let param = { orderId: this.orderId };
      let result = await this.$request.miniOrderDetail(param)
      let { data } = result
      data.orderProductDTOList.map(item => {
        item.textAreaValue = '';
        item.goodRateValue = 5;
      })
      this.goodsDetail = result
      this.goods = data.orderProductDTOList || []
    },

    onSubmit() {
      const { goods, userId, orderId } = this;
      const param = {
        userId,
        orderId,
        evaluateContentVOList: []
      };
      let islevelCheck = true;
      goods.map(item => {
        let obj = {
          content: item.textAreaValue,
          level: item.goodRateValue,
          orderProductId: item.id,
        };
        param.evaluateContentVOList.push(obj);
        if (item.goodRateValue == 0) {
          islevelCheck = false;
          this.$toast('商品未评分')
          return;
        }
      });
      if (islevelCheck) {
        this.$request.miniEvaluate(param).then(res => {
          if (res.msg == '成功') {
            this.$toast('评价提交成功')
            setTimeout(() => {
              this.$goPath(1)
            }, 1000);
          }
        });
      }
    },
  },
}
</script>
<style scoped>
page {
  background-color: #f5f5f5;
}

.page-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 24rpx;
  padding-bottom: 150rpx;
}

.page-container::-webkit-scrollbar {
  width: 0;
}

.page-container .comment-card {
  padding: 24rpx 32rpx 28rpx;
  box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.01);
  border-radius: 16rpx;
  background-color: #fff;
  margin-bottom: 24rpx;
}

.comment-card .goods-info-container {
  display: flex;
  align-items: flex-start;
}

.comment-card .goods-info-container .goods-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 8rpx;
}

.comment-card .goods-info-container .goods-title-container {
  padding-left: 24rpx;
  display: flex;
  flex: 1;
  justify-content: space-between;
}

.comment-card .goods-info-container .goods-title {
  font-size: 28rpx;
  font-weight: normal;
}

.comment-card .goods-info-container .goods-detail {
  font-size: 24rpx;
  font-weight: normal;
  color: #999999;
  margin-top: 16rpx;
}

.comment-card .rate-container {
  display: flex;
  align-items: center;
  margin-top: 22rpx;
}

.comment-card .rate-container .rate-title {
  font-size: 40rpx;
  font-weight: bold;
  margin-right: 12rpx;
}

.t-rate__text {
  color: #32B499 !important;
}

.comment-card .textarea-container {
  margin-bottom: 24rpx;
}

.comment-card .textarea-container .textarea {
  height: 200rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: normal;
}

.t-textarea {
  padding: 0 !important;
}

.t-checkbox {
  --td-checkbox-icon-checked-color: #32B499;
}

.page-container .t-checkbox__bordered {
  display: none;
}


.goods-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.goods-price>view {
  color: #333;
}

.goods-price text {
  font-size: 32rpx;
}

.goods-price .number {
  font-size: 24rpx;
  color: #999999;
}

.submit-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: 24rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.submit-btn>view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500rpx;
  height: 70rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  background-color: #32B499;
  border-radius: 40rpx;
}
</style>